<!-- ol - 起步 -->
<template>
  <div id="map" class="map__x" ref="mapCom"></div>
  <div ref="popupCom" class="popup">
    <!-- 关闭按钮 -->
    <span class="icon-close" @click="closePopup">X</span>
    <!-- 弹窗内容 -->
    <div class="countent">{{ currentCoordinate }}</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import XYZ from "ol/source/XYZ"; // 引入XYZ地图格式
import Overlay from "ol/Overlay"; // 引入覆盖物模块
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import { fromLonLat } from "ol/proj";
import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style";
import { click } from "ol/events/condition";
import { Pointer } from "ol/interaction";
import "ol/ol.css";

const mapCom = ref(null);
const popupCom = ref(null);
const map = ref(null);
const overlay = ref(null);
const currentCoordinate = ref("");

const initMap = () => {
  //注册一个覆盖物
  overlay.value = new Overlay({
    element: popupCom.value, // 弹窗标签，在html里
    autoPan: true, // 如果弹窗在底图边缘时，底图会移动
    autoPanAnimation: {
      // 底图移动动画
      duration: 250,
    },
  });
  // 地图实例
  map.value = new Map({
    target: "map", // 对应页面里 id 为 map 的元素
    layers: [
      // 图层
      new Tile({
        name: "defaultLayer",
        source: new XYZ({
          // 瓦片底图地址
          url: "http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
        }),
      }),
    ],
    view: new View({
      // 地图视图
      projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
      center: [114.31, 30.52], // 深圳坐标
      minZoom: 10, // 地图缩放最小级别
      zoom: 12, // 地图缩放级别（打开页面时默认级别）
    }),
    overlays: [overlay.value],
  });
  mapClick();
  map.value.getView().setResolution(2); // 将分辨率设置为 2
};

// //创建一个点击交互器
// const pointer = new Pointer({
//   handleDownEvent: function (evt) {
//     //获取定位置坐标
//     const lonLat = map.value.pickFunctionalComponentCtx(evt.pixel);
//     //创建一个点元素
//     const ponit = new Point(lonLat);
//     const ponitFeature = new Feature({
//       geometry: ponit,
//       name: "My Point", // 要素的名称
//       style: new Style({
//         image: new CircleStyle({
//           radius: 10,
//           fill: new Fill({
//             color: "red",
//           }),
//           stroke: new Stroke({
//             color: "white",
//             width: 2,
//           }),
//         }),
//       }), // 要素的样式
//     });
//     const vectorSource = map.value.getLayers().item(1).getSource();
//     vectorSource.addFeature(ponitFeature);
//   },
//   condition: click
// });
// map.value.addInteraction(pointer);
const mapClick = () => {
  map.value.on("singleclick", (evt) => {
    // 绑定一个点击事件
    const coordinate = evt.coordinate; // 获取坐标
    console.log(evt.pixel);
    currentCoordinate.value = coordinate; // 保存坐标点
    overlay.value.setPosition(coordinate); // 设置覆盖物出现的位置
  });
};

const closePopup = () => {
  overlay.value.setPosition(undefined);
  currentCoordinate.value = "";
};

onMounted(() => {
  initMap();
});
</script>

<style lang="scss" scoped>
.map__x {
  width: 100wh;
  height: 100vh;
  border: 1px solid #eee;
}
.popup {
  width: 500px;
  height: 250px;
  background: #fff;
  position: absolute;
  top: -115px;
  left: -150px;
  box-sizing: border-box;
  padding: 10px;
  font-size: 50px;

  &::after {
    content: "";
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
  }

  .icon-close {
    position: absolute;
    top: 0px;
    right: 8px;
    cursor: pointer;
  }

  .content {
    margin-top: 14px;
  }
}
</style>
